iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 8

[Day 08 - CSS Architecture] CSS設計模式,擺脫義大利麵代碼

  • 分享至 

  • xImage
  •  

當別人說你的程式是義大利麵代碼 (Spaghetti code),聽起來很好吃,應該是稱讚的意思吧!千萬不要誤會,那是在說你的程式碼雜亂無章、難以理解。

在前面的章節我們學到可以隨意命名 HTML 元素的 ID 和 Class 名稱,意味著沒有結構化的命名模式下,可能會因為重複命名,需要去解決 CSS 衝突的問題,就一直往下新增 CSS 代碼,導致程式亂亂的。所以本篇的教學重點就是:建立易讀易寫的CSS代碼規則 — OOCSS / BEM。

OOCSS

OOCSS (Object Oriented CSS),主張用物件的形式管理 CSS 的分類規則,專注在讓組件的重複使用性提升,並且提出下面兩個主要的原則:

結構與樣式的分離

將重複的樣式抽離,獨立成一個組件重複使用。舉例來說如下面的程式碼,紅色的 box 和紅色的 button,那我們就可以把紅色的樣式抽離出來:

CSS

.box {
    width: 200px;
    height: 50px;
}
.button {
    width: 100px;
    height: 50px;
    padding: 10px;
}
.red-skin {
    background-color: red;
}

HTML

<div class="red-skin box"></div>
<button class="red-skin button"></div>

容器和內容的分離

將容器內部通用的結構分離。舉例來說如下面的程式碼,Header 雖然在 Section 跟 Footer 區塊都會出現,外觀一樣但安裝的位置不一樣,那我們就可以將 Header 像零件一樣抽離,再另外設定各自安裝的位置:

CSS

.global-header {
    font-size: 28px;
    width:500px;
    height:10px
}
.section-header {
    padding: 10px;
}
.footer-header {
    padding: 5px;
}

HTML

<section>
    <div class="section-header global-header">...</div>
</section>
<footer>
    <div class="footer-header global-header">...</div>
</footer>

BEM

BEM (Block, Element, Modifier),主張劃分網頁區塊,以區塊 (Block)、元素 (Element) 和修飾子 (Modifier) 命名,用組件的模式去進行介面開發。

區塊 (Block)

指的是獨立的頁面元件

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li>...</li>
        <li>...</li>
    </ul>
</header>

元素 (Element)

存在於 Block 中不可單獨存在的小元件,使用雙底線 __ 做分隔。

<header class="header">
    <div class="logo">
        <!-- logo中的元素 -->
        <img class="logo__img" />
        <h1 class="logo__title" />
    </div>
    <ul class="menu">
        <!-- menu中的item元素 -->
        <li class="menu__item">...</li>
        <li class="menu__item">...</li>
    </ul>
</header>

修飾子 (Modifier)

描述 Block 或 Element 的外觀,不能單獨使用,用單底線 _ 做分隔。

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li class="menu__item">...</li>
        <!-- menu中的item--active元素 -->
        <li class="menu__item_active">...</li>
    </ul>
</header>

小結

OOCSS 強調的能提升組件的重複使用性、BEM 能讓命名結構更清楚,最主要的是能活用兩者的核心規則,建立易讀易寫的CSS,方便之後維護與管理。這個章節雖然只介紹了這兩種,但其實還有 SMACSS 的方式來管理 CSS,建議你都可以了解一下。那今天的介紹就到這,接下來我們會提到最後一個網頁核心技術 — Javascript,那我們就下章再見囉!

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️

參考資料


上一篇
[Day 07 - RWD] 跨平台生存之道 — RWD響應式網頁設計
下一篇
[Day 09 - JS] 網頁第三大核心技術 — Javascript
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言